import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App);

// 全局样式
import './assets/css/init.css'
// 引入icon
import './assets/icon-font/iconfont.css'

// 注册全局组件page-view,用来做其他组件的容器
import PageView from '@/components/PageView.vue'
app.component('page-view', PageView)
import PageHeader from '@/components/PageHeader.vue'
app.component('page-header', PageHeader)

// Toast
import { Toast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { Dialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { Notify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';

// Lazyload
import { Lazyload } from 'vant'
app.use(Lazyload, {
    lazyComponent: true,
    loading: require('./assets/image/loading.gif'),
    error: require('./assets/image/error.jpeg'),
    preload: 1.3,
    attempt: 5
}).use(Toast).use(Dialog).use(Notify).use(ImagePreview)

// 注册长按指令
app.directive("longpress", {
    mounted(el, binding, vnode, oldVnode) {
        let timeout = binding.arg || 500;
        let timeId = null;
        el.addEventListener('touchstart', event => {
            timeId = setTimeout(() => {
                binding.value.call(vnode.context, event)
            }, timeout)
        })
        el.addEventListener('touchmove', event => {
            clearTimeout(timeId)
        })
        el.addEventListener('touchcancel', event => {
            clearTimeout(timeId)
        })
        el.addEventListener('touchend', event => {
            clearTimeout(timeId)
        })
    }
})

app.use(store).use(router).mount('#app')
